<!DOCTYPE html>
<html>

<head>
    <title>二手网站</title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            list-style: none;
        }

        body {
            background-color: rgb(176, 168, 168);
        }

        .header {
            width: 100%;
            background: rgb(46, 44, 44);
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .header_right {
            padding-left: 120px;
            justify-content: space-around;
        }

        .header_right span {
            color: white;
            width: 25px;
            height: 25px;

        }

        .logo_ {
            padding-right: 130px;
        }

        .logo {
            width: 90px;
            height: 90px;
        }

        input {
            width: 800px;
            height: 40px;
            border-radius: 15px;
            background-color: aliceblue;

        }

        .menu {
            background-color: #e2e2e2;
            display: flex;
            flex-direction: row;
            width: 92%;
            height: 350px;
            border: 1px solid white;
            text-align: center;
            margin: 10px auto 0px;
            border-radius: 15px;
        }

        .mainUl {
            list-style: none;
            width: 320px;
            height: auto;
            height: 335px;
            padding: 8px 0px;
            background-color: #f0f3ef;
            font-size: 16px;
            border-radius: 15px;
        }

        .mainUl li {
            width: 316px;
            padding-left: 2px;
            line-height: 28px;
        }

        .mainUl li:hover {
            background-color: #e2e2e2;
        }

        .mainUl li a:hover {
            cursor: pointer;
            color: #ff0000;
        }

        .div1 {
            width: 1900px;
            height: 1400px;
            border-radius: 5%;
            background-color: beige;
            margin-top: 20px;

        }

        .div2 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div3 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div4 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div5 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div6 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div7 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div8 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div9 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div10 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div11 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div12 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div13 {
            width: 100px;
            height: 50px;
            border-radius: 35%;
            float: left;
            margin-left: 50px;
            background-color: white;
            margin-top: 20px;
        }

        .div14 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div15 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div16 {
            width: 200px;
            height: 200px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div17 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div18 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div19 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div20 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div21 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div22 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div23 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div24 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div25 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div26 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div27 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div28 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .div29 {
            width: 200px;
            height: 400px;
            margin-top: 20px;
            float: left;
            margin-left: 20px;
        }

        .dropdown {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            width: 200px;
        }

        .dropdown a {
            display: block;
            padding: 5px 0;
            color: black;
            text-decoration: none;
        }

        .dropdown a:hover {
            color: #ff0000;
        }

        #main {
            width: 60px;
            background-color: white;
            position: fixed;
            right: 0px;
            bottom: 50%;
        }

        .item {
            width: 60px;
            height: 65px;
            border: 1px solid #efefef;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        #photo1 {
            width: 14px;
            height: 21px;
        }

        #photo2 {
            width: 22px;
            height: 18px;
        }

        #erweima {
            width: 100px;
            display: none;
            background-color: white;
            position: absolute;
            right: 60px;
            top: 0px;
        }

        #officialAccount {
            width: 100px;
            display: none;
            background-color: white;
            position: absolute;
            right: 60px;
            top: 67px;
        }

        #photo3 {
            width: 18px;
            height: 18px;
        }

        #photo4 {
            width: 18px;
            height: 20px;
        }

        #photo5 {
            width: 18px;
            height: 20px;
        }

        .pic {
            width: 70px;
            margin: 15px 15px 0px 15px;
        }

        .text {
            font-size: 12px;
            color: #363636;
            text-align: center;
            margin-bottom: 5px;
        }

        .bottom {
            width: 100%;
            height: 100px;
            background-color: black;
            position: absolute;
            bottom: 0px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .hidde_1{
            width:1000px;
            height:600px;
            z-index:999 ;
            background: white;
            display:flex;
            position: absolute;
            top:40%;
            left:60%;
            transform:translate(-60%,-40%); 
            visibility: hidden;
        }
        .hidde_1_1{
            display:flex;
            width:100%;
        }
        #sort{
            margin: 5px 8px 0px 20px;
            
            font-weight: bold;
        }
        .List{
            margin: 5px 8px 0px 20px;
            display:flex;
            justify-content: space-around;
            width:80%;
        }
    </style>
    <script type="text/javascript">
        
        function showErweima() {
            document.getElementById("erweima").style.display = "block";
        }
        function closeErweima() {
            document.getElementById("erweima").style.display = "none";
        }
        function showWeixin() {
            document.getElementById("officialAccount").style.display = "block";
        }
        function closeWeixin() {
            document.getElementById("officialAccount").style.display = "none";
        }
    </script>
</head>

<body>
    <div class="header">
        <div class="logo_"><img src="./assets\logo.png" class="logo"></div>
        <div> <input type="text" name="resou" placeholder="搜你想搜的"></div>
        <div class="header_right">
            <span>登录</span>
            <span>订单</span>
        </div>
    </div>

    <div class="hidde_1">
        <div class="hidde_1_1">
            <span id="sort">手机></span>
            <div class="List">
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
                <span>苹果手机</span>
            </div>
        </div>
    </div>
    <div class="menu">
        <ul class="mainUl">
            <li><a>手机</a> /<a>运营商</a></li>
            <li><a>电脑</a> /<a>办公</a> /<a>工业品</a></li>
            <li><a>家居</a> /<a>家具</a> /<a>家装</a></li>
            <li><a>男装</a> /<a>女装</a> /<a>童装</a> </li>
            <li><a>美妆</a> /<a>个护清洁</a> /<a>宠物</a></li>
            <li><a>女鞋</a> /<a>箱包</a> /<a>钟表</a></li>
            <li><a>男鞋</a> /<a>运动</a> /<a>户外</a></li>
            <li><a>房产</a> /<a>汽车</a> /<a>汽车用品</a></li>
            <li><a>母婴</a> /<a>玩具乐器</a> /<a>特产</a></li>
            <li><a>食品</a> /<a>酒类</a> /<a>生鲜</a></li>
            <li><a>艺术</a> /<a>礼品鲜花</a> /<a>农资绿植</a></li>
            <li><a>医药保健</a> /<a>计生情趣</a></li>
        </ul>
        <div class=""></div>
        <div><img src="../progrom\assets\O1CN01TPHySh29g1WPi5DzR_!!6000000008096-2-tps-480-480.png" width="200px"
                height="300px"></div>
        <div><img src="../progrom\assets\O1CN01qyf4561Kudl4pQPuB_!!6000000001224-2-tps-480-480.png"></div>
        <div><img src="../progrom\assets\O1CN01aeRKAA1W6yC0Rijbv_!!6000000002740-2-tps-480-480.png"></div>
    </div>

    <script>
        const menu = document.querySelectorAll('.mainUl li a')
        const hidde_1 = document.querySelector('.hidde_1')
        for(let  i =0;i<menu.length;i++){
            menu[i].addEventListener('mouseover',()=>{
                hidde_1.style.visibility = 'visible'
            })
            menu[i].addEventListener('mouseout',()=>{
                hidde_1.style.visibility = 'hidden'
            })
        }
        hidde_1.addEventListener('mouseover',()=>{
            hidde_1.style.visibility = 'visible'
        })
        hidde_1.addEventListener('mouseout',()=>{
            hidde_1.style.visibility = 'hidden'
        })
    </script>


    <div class="div1"></div>
    <div class="div2">
        <h2>猜你喜欢</h2>
    </div>
    <div class="div3">
        <h2>个人闲置</h2>
    </div>
    <div class="div4">
        <h2>BID娃娃</h2>
    </div>
    <div class="div5">
        <h2>垂钓</h2>
    </div>
    <div class="div6">
        <h2>吉他乐器</h2>
    </div>
    <div class="div7">
        <h2>台球</h2>
    </div>
    <div class="div8">
        <h2>摄影</h2>
    </div>
    <div class="div9">
        <h2>钱币收藏</h2>
    </div>
    <div class="div10">
        <h2>女装穿搭</h2>
    </div>
    <div class="div11">
        <h2>居家好物</h2>
    </div>
    <div class="div12">
        <h2>大牌美妆</h2>
    </div>
    <div class="div13">
        <h2>机车</h2>
    </div>
    <div class="div14"><img src="0a1d7a5c2ecedfe4b68b4c3187afe6c.png" width="200" height="400px" /></div>
    <div class="div15"><img src="2d64679ae699b96961b80c9d5fb2d2f.png" width="200" height="400px" /></div>
    <div class="div16"><img src="360af8ebd813bf9d7f0fcb6df8cae44.png" width="200" height="400px" /></div>
    <div class="div17"><img src="7eb08deb5451523cac5d2cfbef0180a.png" width="200" height="400px" /></div>
    <div class="div18"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div19"><img src="a0aab418ec959296180c5d4b4d8e011.png" width="200" height="400px" /></div>
    <div class="div20"><img src="adaab835eb9bfecd7621bde5a778114.png" width="200" height="400px" /></div>
    <div class="div21"><img src="bee44c9b7bf3597d407ff42b2e38fff.png" width="200" height="400px" /></div>
    <div class="div22"><img src="a397fe55d01ac86e6bd055863bca4d6.png" width="200" height="400px" /></div>
    <div class="div23"><img src="b5fe833f9da84b21eb7279ca24fbdc0.png" width="200" height="400px" /></div>
    <div class="div24"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div25"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div26"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div27"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div28"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>
    <div class="div29"><img src="8b5c209a78dd4583cf58d0f1872804c.png" width="200" height="400px" /></div>

    </div>
    <div id="main">
        <div class="item" onmouseover="showErweima()" onmouseout="closeErweima()">
            <img id="photo1"
                src="https://img.alicdn.com/imgextra/i4/O1CN01lEPnjg1PfapaC1Pmh_!!6000000001868-2-tps-78-78.png">
            <div class="text">发闲置</div>
            <div id="erweima">
                <img class="pic" src="http://www.youyu001.com/res/htmlLX/icon2_1.png">
                <div class="text">发闲置功能待上线</div>
            </div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo2"
                src="https://img.alicdn.com/imgextra/i4/O1CN012LgurL1IIVYdOXC3C_!!6000000000870-2-tps-78-78.png">
            <div class="text">APP</div>
            <div id="officialAccount">
                <img class="pic" src="http://www.youyu001.com/res/htmlLX/icon2_1.png">
                <div class="text">扫码下载APP</div>
            </div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo3"
                src="https://img.alicdn.com/imgextra/i2/O1CN01O2kuWY1OUlrBZUndC_!!6000000001709-2-tps-78-78.png">
            <div class="text">消息</div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo4"
                src="https://img.alicdn.com/imgextra/i1/O1CN01BoZf9m2940ejklcsZ_!!6000000008013-2-tps-78-78.png">
            <div class="text">反馈</div>
        </div>
        <div class="item" onmouseover="showWeixin()" onmouseout="closeWeixin()">
            <img id="photo5"
                src="https://img.alicdn.com/imgextra/i1/O1CN017iNVCM1XFxai5WDG6_!!6000000002895-2-tps-78-78.png">
        </div>
    </div>
    <div class="bottom">

    </div>
</body>

</html>